Top 200 medications

Top 200 Medications

data = FileAttachment("top200medications.csv").csv({ typed: true })

//| 2. Define reactive state
mutable index = 0
mutable flipped = false

//| 3. The Card (Retain CSS)
viewof card = {
  const rotate = flipped ? "rotateY(180deg)" : "rotateY(0deg)";

  const container = html`
  <div style="perspective: 1000px; width: 450px; margin: 40px auto; cursor: pointer; height: 300px;">
    <div style="
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
      transform: ${rotate};
      border-radius: 15px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.15);
      border: 1px solid #e0e0e0;
    ">
      <div style="
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: white;
        border-radius: 15px;
        font-size: 1.4rem;
        font-weight: bold;
        text-align: center;
      ">
        ${data[index].Question}
      </div>

      <div style="
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        transform: rotateY(180deg);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: #f8f9fa;
        border-radius: 15px;
        font-size: 1.4rem;
        text-align: center;
      ">
        ${data[index].Answer}
      </div>
    </div>
  </div>`;

  container.onclick = () => {
    mutable flipped = !flipped
  }

  return container;
}


// 4. The Controls (Fixed Logic)
viewof controls = {
  const ui = html`
  <div style="text-align: center;">
    <button id="prevBtn" style="padding: 10px 20px; border-radius: 20px; border: 1px solid #ccc; cursor: pointer; background: white;">
      ← Previous
    </button>

    <span style="margin: 0 20px; font-weight: bold; font-family: sans-serif;">
      ${index + 1} / ${data.length}
    </span>

    <button id="nextBtn" style="padding: 10px 20px; border-radius: 20px; border: 1px solid #ccc; cursor: pointer; background: white;">
      Next →
    </button>
  </div>`;

  // Attach functionality manually to ensure it works every time
  ui.querySelector("#prevBtn").onclick = () => {
    mutable index = (index - 1 + data.length) % data.length;
    mutable flipped = false;
  };

  ui.querySelector("#nextBtn").onclick = () => {
    mutable index = (index + 1) % data.length;
    mutable flipped = false;
  };

  return ui;
  
}

Flashcards legend / abbreviation

NCLM = Non-controlled Legend Medication
ACEi = Angiotensin I Converting Enzyme Inhibitor
ARB = Angiotensin II Receptor Blocker
PPI = Proton pump inhibitor
GERD = Gastroesophageal Reflux Disease
SSRI = Selective Serotonin Re-uptake inhibitor
SNRI = Serotonin Norepinephrine Re-uptake inhibitor
APAP = Acetaminophen
HCTZ = Hydrochlorothiazide
NSAID = Non-steroidal Anti-inflammatory Drug
ADHD = Attention Deficit Hyperactivity Disorder
H1RA = Histamine H1 Receptor Agonist